<template>
  <el-button
    v-throttle="handelClick"
    :type="type"
    v-bind="$attrs"
    :plain="plain"
    class="common-search-btn"
    :class="className"
    :icon="icon"
  >
    <SvgIcon v-if="svgIcon" :name="svgIcon" />
    <slot></slot>
  </el-button>
</template>

<script>
/**
 * 节流 button, 默认 1000ms
 * @see https://www.npmjs.com/package/v-throttle
 */
export default {
  name: "TButton",
  props: {
    // 按钮类型
    type: {
      default: "primary",
    },
    // 是否朴素按钮
    plain: {
      type: Boolean,
      default: false,
    },
    // 图标
    icon: {
      type: String,
      default: "",
    },
    svgIcon: {
      type: String,
      default: "",
    },
    className: {
      type: String,
      default: "",
    },
  },
  methods: {
    handelClick() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="scss">
.svg-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.exportClass {
  color: #1d7ff2 !important;
  background-color: transparent !important;
  border-color: #1d7ff2 !important;

  &:focus,
  &:hover {
    background-color: #e8f2fd !important;
  }

  &.is-disabled {
    color: #94cefa !important;
    background-color: #fff !important;
    border-color: #94cefa !important;
  }
}

.uploadClass {
  color: #1d7ff2 !important;
  background-color: transparent !important;
  border-color: #1d7ff2 !important;

  &:focus,
  &:hover {
    background-color: #e8f2fd !important;
  }

  &.is-disabled {
    color: #94cefa !important;
    background-color: #fff !important;
    border-color: #94cefa !important;
  }
}
</style>
